<template>
	<view class="category-edit-container">
		<!-- 页面标题 -->
		<view class="page-header">
			<text class="title">分类管理</text>
			<button class="close-btn" @click="$emit('close')">✕</button>
		</view>

		<!-- 主分类列表 -->
		<view class="main-category-wrapper">
			<text class="section-title">主分类</text>

			<!-- 主分类项（带层级视觉） -->
			<view v-for="(mainItem, mainIdx) in localCategoryData" :key="mainItem.id" class="main-category-card">
				<!-- 主分类头部（展示/编辑切换） -->
				<view class="main-category-header">
					<!-- 主分类名称区域 -->
					<view class="main-name-container">
						<!-- 层级标识（视觉强化） -->
						<view class="level-indicator main-level"></view>

						<!-- 名称展示/编辑 -->
						<view class="name-wrapper">
							<text v-if="!isMainEditing[mainIdx]" class="main-category-name">
								{{ mainItem.name }}
							</text>
							<input v-else v-model="mainEditName" class="main-edit-input" @blur="confirmMainEdit(mainIdx)" @keyup.enter="confirmMainEdit(mainIdx)" autofocus />
						</view>
					</view>

					<!-- 主分类操作按钮组 -->
					<view class="main-action-btns">
						<view class="" v-if="!isMainEditing[mainIdx]">
							<button class="edit-btn" @click="toggleMainEdit(mainIdx)">编辑</button>
							<button class="delete-btn" @click="confirmDeleteMain(mainIdx)">删除</button>
						</view>
						<view class="" v-else>
							<button class="confirm-btn" @click="confirmMainEdit(mainIdx)">确认</button>
							<button class="cancel-btn" @click="cancelMainEdit(mainIdx)">取消</button>
						</view>
					</view>
				</view>

				<!-- 子分类列表（嵌套在主分类内，缩进体现层级） -->
				<view class="sub-category-list">
					<text class="sub-section-title">子分类</text>

					<!-- 子分类项 -->
					<view v-for="(subItem, subIdx) in mainItem.children" :key="subItem.id" class="sub-category-item">
						<!-- 子分类名称区域（缩进比主类深） -->
						<view class="sub-name-container">
							<!-- 层级标识（比主类浅，体现从属） -->
							<view class="level-indicator sub-level"></view>

							<!-- 名称展示/编辑 -->
							<view class="name-wrapper">
								<text v-if="!getSubEditingStatus(mainIdx, subIdx)" class="sub-category-name">
									{{ subItem.name }}
								</text>
								<input
									v-else
									v-model="subEditName"
									class="sub-edit-input"
									@blur="confirmSubEdit(mainIdx, subIdx)"
									@keyup.enter="confirmSubEdit(mainIdx, subIdx)"
									autofocus
								/>
							</view>
						</view>

						<!-- 子分类操作按钮组 -->
						<view class="sub-action-btns">
							<view class="" v-if="!getSubEditingStatus(mainIdx, subIdx)">
								<button class="edit-btn small-btn" @click="toggleSubEdit(mainIdx, subIdx)">编辑</button>
								<button class="delete-btn small-btn" @click="confirmDeleteSub(mainIdx, subIdx)">删除</button>
							</view>
							<view class="" v-else>
								<button class="confirm-btn small-btn" @click="confirmSubEdit(mainIdx, subIdx)">确认</button>
								<button class="cancel-btn small-btn" @click="cancelSubEdit(mainIdx, subIdx)">取消</button>
							</view>
						</view>
					</view>

					<!-- 添加子分类按钮（在子分类列表底部） -->
					<button class="add-sub-btn" @click="showAddSubForm(mainIdx)" :disabled="isAnyEditing">+ 添加子分类</button>

					<!-- 添加子分类表单（弹窗式） -->
					<view class="add-sub-form" v-if="addSubMainIdx === mainIdx">
						<input v-model="newSubName" class="sub-add-input" placeholder="请输入子分类名称" @keyup.enter="confirmAddSub" />
						<view class="form-btns">
							<button class="form-confirm" @click="confirmAddSub">确认添加</button>
							<button class="form-cancel" @click="cancelAddSub">取消</button>
						</view>
					</view>
				</view>
			</view>

			<!-- 添加主分类区域（固定在主分类列表底部） -->
			<view class="add-main-section">
				<input v-model="newMainName" class="main-add-input" placeholder="请输入主分类名称" @keyup.enter="confirmAddMain" :disabled="isAnyEditing" />
				<button class="add-main-btn" @click="confirmAddMain" :disabled="isAnyEditing || !newMainName.trim()">+ 添加主分类</button>
			</view>
		</view>
	</view>
</template>

<script>
const db = uniCloud.databaseForJQL();
export default {
	name: 'CategoryEdit',
	props: {
		categoryData: {
			type: Array,
			default: () => []
		},
		groupId: {
			type: String,
			required: true
		}
	},
	data() {
		return {
			localCategoryData: [], // 本地数据副本（完全独立于props）

			// 编辑状态管理（避免多元素同时编辑）
			isMainEditing: [], // 主分类编辑状态：[false, true, ...]
			isSubEditing: [], // 子分类编辑状态：[[false, true], ...]
			mainEditName: '', // 主分类编辑临时值
			subEditName: '', // 子分类编辑临时值

			// 添加表单状态
			newMainName: '', // 新主分类名称
			newSubName: '', // 新子分类名称
			addSubMainIdx: -1 // 正在添加子分类的主分类索引（-1表示未激活）
		};
	},
	computed: {
		// 检查是否有任何元素处于编辑状态
		isAnyEditing() {
			return this.isMainEditing.some((status) => status) || this.isSubEditing.some((subStatus) => subStatus && subStatus.some((status) => status));
		}
	},
	watch: {
		// 深度监听props变化，同步到本地数据
		categoryData: {
			deep: true,
			immediate: true,
			handler(newVal) {
				this.localCategoryData = JSON.parse(JSON.stringify(newVal));
				// 初始化编辑状态数组
				this.initEditStatus();
			}
		}
	},
	methods: {
		// 获取子分类编辑状态（修复模板中复杂表达式的问题）
		getSubEditingStatus(mainIdx, subIdx) {
			return this.isSubEditing[mainIdx] && this.isSubEditing[mainIdx][subIdx];
		},

		// 初始化编辑状态数组（与本地数据长度匹配）
		initEditStatus() {
			this.isMainEditing = this.localCategoryData.map(() => false);
			this.isSubEditing = this.localCategoryData.map((mainItem) => {
				return (mainItem.children || []).map(() => false);
			});
		},

		// ---------------------- 主分类操作 ----------------------
		// 切换主分类编辑状态
		toggleMainEdit(mainIdx) {
			// 先关闭其他所有编辑状态
			this.cancelAllEditing();
			// 激活当前主分类编辑
			this.isMainEditing[mainIdx] = true;
			// 赋值初始编辑值
			this.mainEditName = this.localCategoryData[mainIdx].name;
		},

		// 取消主分类编辑
		cancelMainEdit(mainIdx) {
			this.isMainEditing[mainIdx] = false;
			this.mainEditName = '';
		},

		// 确认主分类编辑
		async confirmMainEdit(mainIdx) {
			const newName = this.mainEditName.trim();
			if (!newName) {
				uni.showToast({ title: '主分类名称不能为空', icon: 'none' });
				return;
			}

			// 更新本地数据
			this.localCategoryData[mainIdx].name = newName;
			// 关闭编辑状态
			this.isMainEditing[mainIdx] = false;
			this.mainEditName = '';

			// 同步到数据库
			await this.syncToDB();
		},

		// 确认删除主分类（带二次确认）
		confirmDeleteMain(mainIdx) {
			uni.showModal({
				title: '删除确认',
				content: '确定要删除这个主分类吗？其下所有子分类也会被删除',
				success: async (res) => {
					if (res.confirm) {
						// 删除本地数据
						this.localCategoryData.splice(mainIdx, 1);
						// 重新初始化编辑状态
						this.initEditStatus();
						// 同步到数据库
						await this.syncToDB();
					}
				}
			});
		},

		// 确认添加主分类
		async confirmAddMain() {
			const newName = this.newMainName.trim();
			if (!newName) {
				uni.showToast({ title: '主分类名称不能为空', icon: 'none' });
				return;
			}

			// 创建新主分类（带空子女分类数组）
			const newMainCategory = {
				id: Date.now(),
				name: newName,
				children: []
			};

			// 添加到本地数据
			this.localCategoryData.push(newMainCategory);

			// 重新初始化编辑状态
			this.initEditStatus();
			console.log('添加了主分类', this.localCategoryData);
			// 清空输入框
			this.newMainName = '';

			// 同步到数据库
			await this.syncToDB();
		},

		// ---------------------- 子分类操作 ----------------------
		// 显示添加子分类表单
		showAddSubForm(mainIdx) {
			// 先关闭其他添加表单
			this.addSubMainIdx = -1;
			// 激活当前主分类的添加表单
			this.addSubMainIdx = mainIdx;
			// 清空输入框
			this.newSubName = '';
		},

		// 取消添加子分类
		cancelAddSub() {
			this.addSubMainIdx = -1;
			this.newSubName = '';
		},

		// 确认添加子分类
		async confirmAddSub() {
			const mainIdx = this.addSubMainIdx;
			const newName = this.newSubName.trim();

			if (mainIdx === -1 || !newName) {
				uni.showToast({ title: '子分类名称不能为空', icon: 'none' });
				return;
			}

			// 确保主分类有children数组
			if (!this.localCategoryData[mainIdx].children) {
				this.localCategoryData[mainIdx].children = [];
			}

			// 创建新子分类
			const newSubCategory = {
				id: Date.now() + Math.random(), // 避免与主分类ID重复
				name: newName
			};

			// 添加到本地数据
			this.localCategoryData[mainIdx].children.push(newSubCategory);
			// 重新初始化编辑状态
			this.initEditStatus();
			// 关闭添加表单
			this.addSubMainIdx = -1;
			this.newSubName = '';

			// 同步到数据库
			await this.syncToDB();
		},

		// 切换子分类编辑状态
		toggleSubEdit(mainIdx, subIdx) {
			// 先关闭其他所有编辑状态
			this.cancelAllEditing();
			// 激活当前子分类编辑
			if (!this.isSubEditing[mainIdx]) {
				this.isSubEditing[mainIdx] = [];
			}
			this.isSubEditing[mainIdx][subIdx] = true;
			// 赋值初始编辑值
			this.subEditName = this.localCategoryData[mainIdx].children[subIdx].name;
		},

		// 取消子分类编辑
		cancelSubEdit(mainIdx, subIdx) {
			if (this.isSubEditing[mainIdx]) {
				this.isSubEditing[mainIdx][subIdx] = false;
				this.subEditName = '';
			}
		},

		// 确认子分类编辑
		async confirmSubEdit(mainIdx, subIdx) {
			const newName = this.subEditName.trim();
			if (!newName) {
				uni.showToast({ title: '子分类名称不能为空', icon: 'none' });
				return;
			}

			// 更新本地数据
			this.localCategoryData[mainIdx].children[subIdx].name = newName;
			// 关闭编辑状态
			this.isSubEditing[mainIdx][subIdx] = false;
			this.subEditName = '';

			// 同步到数据库
			await this.syncToDB();
		},

		// 确认删除子分类（带二次确认）
		confirmDeleteSub(mainIdx, subIdx) {
			uni.showModal({
				title: '删除确认',
				content: '确定要删除这个子分类吗？',
				success: async (res) => {
					if (res.confirm) {
						// 删除本地数据
						this.localCategoryData[mainIdx].children.splice(subIdx, 1);
						// 重新初始化编辑状态
						this.initEditStatus();
						// 同步到数据库
						await this.syncToDB();
					}
				}
			});
		},

		// ---------------------- 通用操作 ----------------------
		// 取消所有编辑状态
		cancelAllEditing() {
			// 取消主分类编辑
			this.isMainEditing = this.isMainEditing.map(() => false);
			// 取消子分类编辑
			this.isSubEditing = this.isSubEditing.map((subStatus) => {
				return subStatus ? subStatus.map(() => false) : [];
			});
			// 清空编辑临时值
			this.mainEditName = '';
			this.subEditName = '';
			// 关闭添加表单
			this.addSubMainIdx = -1;
		},

		// 同步本地数据到数据库（统一方法，避免重复代码）
		async syncToDB() {
			try {
				  const queryRes = await db.collection('groupShop')
				      .where({ groupId: this.groupId })
				      .get();
				    let result;
				    if (queryRes.data && queryRes.data.length > 0) {
				      // 2. 存在则更新
				      result = await db.collection('groupShop')
				        .where({ groupId: this.groupId })
				        .update({ category: this.localCategoryData });
				    } else {
				      // 3. 不存在则新增（注意：需包含 groupId 字段，确保后续能匹配到）
				      result = await db.collection('groupShop')
				        .add({
				          groupId: this.groupId, // 必须包含查询条件的字段
				          category: this.localCategoryData,
				          });
				    }
	
				if (result.updated === 1||result.id) {
					uni.showToast({ title: '操作成功', icon: 'success' });
					// 通知父组件更新数据
					this.$emit('updataMain', JSON.parse(JSON.stringify(this.localCategoryData)));
				} else {
					uni.showToast({ title: '操作失败，请重试', icon: 'none' });
					// 回滚本地数据（使用props的原始值）
					this.localCategoryData = JSON.parse(JSON.stringify(this.categoryData));
					this.initEditStatus();
				}
			} catch (error) {
				console.error('分类同步数据库失败:', error);
				uni.showToast({ title: '网络错误，请检查网络', icon: 'none' });
				// 回滚本地数据
				this.localCategoryData = JSON.parse(JSON.stringify(this.categoryData));
				this.initEditStatus();
			}
		}
	}
};
</script>

<style lang="scss" scoped>
/* 容器样式 */
.category-edit-container {
	position: absolute;
	top: 150rpx;
	left: 0;
	right: 0;
	width: 100vw;
	min-height: 100vh;
	z-index: 999;
	padding: 20rpx;
	background-color: #f8f8f8;
	box-sizing: border-box;
}

/* 页面头部 */
.page-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 30rpx;

	.title {
		font-size: 36rpx;
		font-weight: 600;
		color: #333;
	}

	.close-btn {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		background-color: #eee;
		color: #666;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border: none;
	}
}

/* 主分类区域 */
.main-category-wrapper {
	.section-title {
		display: block;
		font-size: 28rpx;
		font-weight: 500;
		color: #666;
		margin-bottom: 16rpx;
	}

	/* 主分类卡片（视觉分层核心） */
	.main-category-card {
		background-color: #fff;
		border-radius: 16rpx;
		padding: 20rpx;
		margin-bottom: 24rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	}

	/* 主分类头部 */
	.main-category-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
		padding-bottom: 16rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	/* 主分类名称容器（带层级标识） */
	.main-name-container {
		display: flex;
		align-items: center;
		flex: 1;
	}

	/* 层级标识（视觉区分核心） */
	.level-indicator {
		width: 8rpx;
		height: 28rpx;
		border-radius: 4rpx;
		margin-right: 16rpx;
	}

	.main-level {
		background-color: #007aff; /* 主分类用深色 */
	}

	.sub-level {
		background-color: #07c160; /* 子分类用浅色，体现从属 */
		opacity: 0.7;
	}

	/* 名称展示样式 */
	.name-wrapper {
		.main-category-name {
			font-size: 32rpx;
			color: #333;
			font-weight: 500;
		}

		.sub-category-name {
			font-size: 28rpx;
			color: #444;
		}
	}

	/* 编辑输入框样式 */
	.main-edit-input,
	.sub-edit-input {
		width: 100%;
		padding: 12rpx 16rpx;
		border: 2rpx solid #007aff;
		border-radius: 8rpx;
		font-size: 28rpx;

		&::placeholder {
			color: #ccc;
		}
	}

	.sub-edit-input {
		border-color: #07c160;
	}

	/* 操作按钮通用样式 */
	.main-action-btns,
	.sub-action-btns {
		display: flex;
		gap: 12rpx;
	}

	.edit-btn {
		background-color: #e8f3ff;
		color: #007aff;
		border: none;
		border-radius: 8rpx;
		padding: 0 20rpx;
		height: 56rpx;
		font-size: 24rpx;
	}

	.delete-btn {
		background-color: #fff2f0;
		color: #f53f3f;
		border: none;
		border-radius: 8rpx;
		padding: 0 20rpx;
		height: 56rpx;
		font-size: 24rpx;
	}

	.confirm-btn {
		background-color: #007aff;
		color: #fff;
		border: none;
		border-radius: 8rpx;
		padding: 0 20rpx;
		height: 56rpx;
		font-size: 24rpx;
	}

	.cancel-btn {
		background-color: #eee;
		color: #666;
		border: none;
		border-radius: 8rpx;
		padding: 0 20rpx;
		height: 56rpx;
		font-size: 24rpx;
	}

	/* 子分类按钮缩小（视觉层级） */
	.small-btn {
		height: 48rpx;
		padding: 0 16rpx;
		font-size: 22rpx;
	}

	/* 子分类列表（缩进体现层级） */
	.sub-category-list {
		padding-left: 40rpx; /* 核心缩进：比主分类深，体现从属 */
		margin-top: 16rpx;

		.sub-section-title {
			display: block;
			font-size: 24rpx;
			color: #888;
			margin-bottom: 12rpx;
		}

		/* 子分类项 */
		.sub-category-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 16rpx 0;
			border-bottom: 1rpx dashed #f0f0f0;

			&:last-child {
				border-bottom: none;
			}
		}

		/* 添加子分类按钮 */
		.add-sub-btn {
			width: 100%;
			background-color: #f0f9ff;
			color: #007aff;
			border: 1rpx dashed #007aff;
			border-radius: 8rpx;
			height: 60rpx;
			font-size: 24rpx;
			margin-top: 16rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		/* 添加子分类表单 */
		.add-sub-form {
			margin-top: 16rpx;
			padding: 16rpx;
			background-color: #f9f9f9;
			border-radius: 8rpx;
			display: flex;
			flex-direction: column;
			gap: 16rpx;

			.sub-add-input {
				padding: 12rpx 16rpx;
				border: 1rpx solid #ddd;
				border-radius: 8rpx;
				font-size: 24rpx;
			}

			.form-btns {
				display: flex;
				gap: 16rpx;

				.form-confirm {
					flex: 1;
					background-color: #007aff;
					color: #fff;
					border: none;
					border-radius: 8rpx;
					height: 56rpx;
					font-size: 24rpx;
				}

				.form-cancel {
					flex: 1;
					background-color: #eee;
					color: #666;
					border: none;
					border-radius: 8rpx;
					height: 56rpx;
					font-size: 24rpx;
				}
			}
		}
	}

	/* 添加主分类区域 */
	.add-main-section {
		display: flex;
		gap: 16rpx;
		margin-top: 20rpx;

		.main-add-input {
			flex: 1;
			padding: 16rpx;
			border: 1rpx solid #ddd;
			border-radius: 8rpx;
			font-size: 24rpx;
		}

		.add-main-btn {
			background-color: #007aff;
			color: #fff;
			border: none;
			border-radius: 8rpx;
			padding: 0 24rpx;
			height: 68rpx;
			font-size: 24rpx;
		}
	}
}

/* 禁用状态样式 */
button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

input:disabled {
	background-color: #fafafa;
	cursor: not-allowed;
}
</style>
